<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<head>
    <meta charset="UTF-8">
    <title>添加预约服务</title>
    <link href="../../resources/css/common/bootstrap3.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/common/datetimepicker.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/common/page.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../../resources/css/common/component.css"/>
    <link rel="stylesheet" type="text/css" href="../../resources/css/common/Huploadify.css"/>
    <script type="text/javascript" charset="utf-8" src="../../UE/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../UE/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="../../UE/lang/zh-cn/zh-cn.js"></script>
</head>
<style>
    #demo {
        margin-top: 20px;
    }

</style>
<baby>
    <div class="container">
        <div class="page-header navbar-color">
            <h1 id="navbars">添加预约服务</h1>
        </div>
        <div id="demo">
            <div class="form-horizontal add-border">
                <div class="form-group">
                    <label class="col-sm-3 control-label">服务名称:</label>
                    <div class="col-sm-3">
                        <input type="text" v-model="name" class="form-control" placeholder="请输入服务名称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">服务费:</label>
                    <div class="col-sm-3">
                        <input type="text" v-model="price" class="form-control" >
                            <!--onkeyup="value=value.replace(/[^\d]/g,'')" -->
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目名称:</label>
                    <div class="col-sm-3">
                        <input type="text" v-model="project" class="form-control" placeholder="请输入项目名称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目费:</label>
                    <div class="col-sm-3">
                        <input type="text" v-model="projectPrice" class="form-control" >
                        <!--onkeyup="value=value.replace(/[^\d]/g,'')" -->
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">展示图片:</label>
                    <div class="col-sm-3">
                        <div id="showPictureUrlUpload">
                            <img src="" id="showPictureUrl">
                            <div id="uploader_view"></div>
                            <div id="uploader_msg"></div>
                            <input type="text" v-model="showPicture" class="form-control" readonly="readonly">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">商品详情图片:</label>
                    <div class="col-sm-3">
                        <div id="detailPictureUrlUpload">
                            <img src="" id="detailPictureUrl">
                            <input type="text" v-model="detailPicture" class="form-control" readonly="readonly">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">平台价目表规则说明:</label>
                </div>
                <div class="form-group">
                    <script id="editor" type="text/plain" style="width:1024px;height:500px;margin: 0 auto"></script></div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-10">
                        <button type="button" class="btn btn-primary" @click="addInfo()">提交</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</baby>

<script type="text/javascript" src="../../resources/js/common/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../resources/js/common/jquery.Huploadify.js"></script>
<script src="../../resources/js/common/bootstrap3.min.js" type="text/javascript"></script>
<script src="../../resources/js/common/vue.min.js"></script>
<script src="../../resources/js/common/common.js"></script>
<script type="text/javascript">
    var editor = UE.getEditor('content');
</script>
<script>
    var html = window.location.href;
    var arr = html.split("=");
    var ue = UE.getEditor('editor');
    var demo = new Vue({
        el: '#demo',
        data: {
            name: '',
            shopId: '',
            price: 0.00,
            showPicture: '',
            detailPicture:'',
            project:'',
            projectPrice:0.00
        }, methods: {
            addInfo: function () {
                if(this.name==''){
                    alert("请填服务名称");
                    return;
                }
                if(this.project==''){
                    alert("请填项目名称");
                    return;
                }
                var content = ue.getContent();
                if(content==''){
                    alert("请填内容");
                    return;
                }
                var param = {};
                param['content'] = content;
                param['name'] = this.name;
                param['shopId'] = arr[1];
                param['price'] = this.price;
                param['project'] = this.project;
                param['projectPrice'] = this.projectPrice;
                param['showPicture'] = this.showPicture;
                param['detailPicture'] = this.detailPicture;
                if(this.showPicture==''){
                    alert("请上传展示图片");
                    return;
                }
                if(this.detailPicture==''){
                    alert("请上传详情图片");
                    return;
                }
                var flag = executeAjaxByPost('/backend/booking/saveBooking',param);
                if(flag.status == 1){
                    alert("添加成功");
                    window.location.href="/html/booking/list.html?shopId="+arr[1];
                }else{
                    alert("操作失败，请重试！！！");
                }
            }
        },
        mounted: function () {
            $('#showPictureUrlUpload').Huploadify({
                auto:false,
                fileTypeExts:'*.*',
                multi:true,
                formData:{},
                fileSizeLimit:99999999999,
                showUploadedPercent:true,
                showUploadedSize:true,
                removeTimeout:9999999,
//                uploader:'/api/tools/upload_file_for_id',
                uploader:'/backend/api/upload',
                onUploadStart:function(file){
                    console.log(file.name+'开始上传');
                },
                onInit:function(obj){
                    console.log('初始化');
                    console.log(obj);
                },
                onUploadComplete:function(file,data){
                    var data_map = jQuery.parseJSON(data);
                    if (data_map.status == '1') {
                        var imgUrl = data_map.fileUrl;
                        demo.showPicture+=imgUrl+";";
                        $("#uploader_view").append( '<img height="100" alt="" src="'+imgUrl+ '"/><br/><br/>');
                    } else {
                        alert(data_map.error);
                    }
                },
                onCancel:function(file){
                    console.log(file.name+'删除成功');
                },
                onClearQueue:function(queueItemCount){
                    console.log('有'+queueItemCount+'个文件被删除了');
                },
                onDestroy:function(){
                    console.log('destroyed!');
                },
                onSelect:function(file){
                    console.log(file.name+'加入上传队列');
                },
                onQueueComplete:function(queueData){
                    console.log('队列中的文件全部上传完成',queueData);
                }
            });
            $('#detailPictureUrlUpload').Huploadify({
                auto:false,
                fileTypeExts:'*.*',
                multi:true,
                formData:{},
                fileSizeLimit:99999999999,
                showUploadedPercent:true,
                showUploadedSize:true,
                removeTimeout:9999999,
//                uploader:'/api/tools/upload_file_for_id',
                uploader:'/backend/api/upload',
                onUploadStart:function(file){
                    console.log(file.name+'开始上传');
                },
                onInit:function(obj){
                    console.log('初始化');
                    console.log(obj);
                },
                onUploadComplete:function(file,data){
                    var data_map = jQuery.parseJSON(data);
                    if (data_map.status == '1') {
                        var imgUrl = data_map.fileUrl;
                        demo.detailPicture = imgUrl;
                        $('#detailPictureUrl').attr('src', imgUrl);
                    } else {
                        alert(data_map.error);
                    }
                },
                onCancel:function(file){
                    console.log(file.name+'删除成功');
                },
                onClearQueue:function(queueItemCount){
                    console.log('有'+queueItemCount+'个文件被删除了');
                },
                onDestroy:function(){
                    console.log('destroyed!');
                },
                onSelect:function(file){
                    console.log(file.name+'加入上传队列');
                },
                onQueueComplete:function(queueData){
                    console.log('队列中的文件全部上传完成',queueData);
                }
            });
        }
    });
</script>


</html>

